<template>
<el-table
    :data="postsListData"
    height="500"
    border
    style="width: 100%">
    <el-table-column
      label="昵称"
      width="180">
        <template slot-scope="scope">
            <img class="headimgurl" v-bind:src="scope.row.headimgurl" alt="">
            <span>{{scope.row.nickname}}</span>
        </template>
    </el-table-column>
    <el-table-column
      prop="creatTime"
      label="时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="job"
      label="职业"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="180">
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容">
    </el-table-column>
  </el-table>
</template>

<style>
.headimgurl {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
}
</style>

<script>
/* eslint-disable */
import axios from "axios";
export default {
  data() {
    return {
      postsCount: 0,
      postsListData: [],
      pageNumber: 1,
      hasMoreData: true,
      hasLoading: false
    };
  },
  methods: {
    getPostFunc: function(pageNumber) {
      var self = this;
      self.hasLoading = true;
      axios({
        method: "get",
        url: "/posts/getPosts?pageNumber=" + pageNumber
      }).then(function(res) {
        var result = res.data;
        if (result.success) {
          if (result.data.data.length) {
            self.postsListData = self.postsListData.concat(result.data.data);
            self.hasMoreData = true;
            self.hasLoading = false;
          } else {
            self.hasMoreData = false;
            self.hasLoading = false;
          }
          self.postsCount = result.data.count;
        } else {
          alert(result.msg);
        }
      });
    },
    addEventScrollFunc: function() {
      var self = this;
      var container_box = document.getElementsByClassName("container");
      var containerHeight = container_box[0].offsetHeight;
      var scrollValue = window.scrollY;
      var screenHeight = window.screen.height;
      if (scrollValue >= containerHeight - screenHeight - 50) {
        if (self.hasMoreData && !self.hasLoading) {
          self.pageNumber = self.pageNumber + 1;
          self.getPostFunc(self.pageNumber);
        }
      }
    }
  },
  beforeMount() {
    this.getPostFunc(this.pageNumber);
  },
  mounted() {
    window.addEventListener("scroll", this.addEventScrollFunc);
  }
};
</script>

